import  './index.scss';
import { useRef } from "react";
import MyModal from "../index";

function EddModal(props) {
  // closeModal  关闭弹框函数 接收父组件传来的函数
  const { isShowModel, data, submitEdit } = props
   const inputRef = useRef()
   const checkRef = useRef();
  //  提交事件  将输入框和状态框的值传递到父组件
  // 通过ref获取到input的值和checkbox的值
  const formateNewData = () => {
    const newData = {
      id: new Date().getTime(),
      content: inputRef.current.value,
      completed: checkRef.current.checked,
    };
    submitEdit(newData,data.id);
  };
  return (
    <>
      <MyModal isShowModel={isShowModel} modelTitel="EddModal">
        <p>时间：{data.id}</p>
        <p>
          <textarea className='text-area' ref={inputRef} defaultValue={data.content}></textarea>
        </p>
        <p>
          状态:
          <input ref={checkRef} type="checkbox" defaultChecked={data.completed ? true : false} />
        </p>
        <button className=" btn-primary2" onClick={formateNewData}>修改</button>
      </MyModal>
    </>
  );
}

export default EddModal;
